<template>
  <div class="login-container">
    <div class="form-and-image-wrapper">
      <div class="image-container">
        <!-- 背景图片 -->
        <img src="/images/Giao.jpg" class="background-image" alt="Background Image" />
      </div>
      <div class="login-form-container">
        <!-- 登录表单 -->
        <div class="login-form">
          <h2>后台管理系统</h2><br/><br/><br/><br/>
          账号 &nbsp;&nbsp;<input type="text" placeholder="请输入学号" v-model="School_degree" /><br/><br/>
          密码 &nbsp;&nbsp;<input type="password" placeholder="请输入密码" v-model="password" /><br/><br/><br/>
          <button @click="login">登录</button>
          <component v-if="loginError">
            <el-aside :plain="true" @click="login"></el-aside>
          </component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'

export default {
  setup() {
    const router = useRouter();
    const School_degree = ref('');
    const password = ref('');
    const loginError = ref('');
    const nameData = ref([]);
    const login = () => {
      // 这里假设 phone 和 password 是已经获取到的输入值
      const School_degreeValue = School_degree.value; // 这里的 phone 是输入框的引用
      const passwordValue = password.value; // 同上

      axios.post("http://localhost:8080/api/login",
          {
            School_degree: School_degreeValue,
            password: passwordValue
          },
          {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded' // 设置正确的请求头
            }
          })
          .then((res) => {
            const adminID = School_degreeValue;
            localStorage.setItem('adminId', adminID);
            console.log(res.data); // 登录成功，打印 res.data

            // 登录成功后获取 nameData
            axios.get("http://localhost:8080/api/query", {
              params: {
                School_degree: School_degreeValue
              }
            })
                .then((ress) => {
                  nameData.value = ress.data;
                  console.log(nameData.value);
                  const name = nameData.value[0].name;
                  console.log(name);
                  // 登录成功并且获取 nameData 成功后，再跳转
                  const adminName = nameData.value[0].name;
                  localStorage.setItem('adminName', adminName);
                  router.push("/data");
                })
                .catch((erro) => {
                  // 获取 nameData 失败的处理
                  console.log('获取nameData失败', erro);
                  loginError.value = "获取用户信息失败"; // 设置错误信息
                  ElMessage.error('获取用户信息失败，请稍后重试');
                });
          })
          .catch((err) => {
            // 这里处理登录失败的情况
            loginError.value = "登录失败";
            ElMessage.error('登录失败，您的密码或账号出现错误！！！')
          });
    };
    return {
      School_degree,
      password,
      loginError,
      login
    };
  }
}
</script>
<style scoped>
input::placeholder {
  color: #c0c0c0; /* 这里设置你想要的颜色，#c0c0c0是浅灰色 */
  opacity: 5; /* 如果placeholder不够明显，可以去掉透明度 */
}

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5; /* 备用背景颜色 */
}

.form-and-image-wrapper {
  display: flex;
  width: 100%;
  max-width: 800px; /* 根据需要调整最大宽度 */
  height: 500px; /* 指定高度，根据实际需要调整 */
}

.image-container,
.login-form-container {
  flex: 1;
  display: flex;
  justify-content: left;
  align-items: center;
}

.image-container .background-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个容器，同时保持宽高比 */
  border-radius: 10px; /* 根据需要调整 */
}

.login-form-container {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px; /* 根据需要调整 */
  background: white;
}

.login-form {
  height: 92%;
  width:380px;
  max-width: 1000px; /* 设置登录表单的最大宽度 */
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: white;
}

.image-container {
  flex: 2;
  display: flex;
  justify-content: right;
  align-items: center;
}

.image-container img {
  width: 100%;
  height: auto;
  max-width: 300px; /* 或者根据需要调整 */
  border-radius: 15px;
}
.login-form h2 {
  text-align: center;
  margin-bottom: 10px;
  color: #333333;
}

.login-form input, .captcha span {
  width: 80%;
  padding: 10px;
  margin-bottom: 25px; /* 调整间距 */
  border: 1px solid #cccccc;
  border-radius: 6px;
  box-sizing: border-box;
}

.captcha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.captcha input {
  flex-grow: 2; /* 让输入框占据更多空间 */
}

.captcha span {
  background-color: #eeeeee;
  display: inline-block;
  text-align: center;
  margin-left: 10px;
  flex-grow: 1; /* 让验证码占据固定空间 */
}

button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px; /* 调整间距 */
  border: none;
  border-radius: 5px;
  background-color: #42b983;
  color: white;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #3aa373;
}

label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666666;
  margin-bottom: 20px;
}

label input {
  margin-right: 10px;
}

</style>